<!-- subpkg_consult/department/index.vue -->

<template>
	<view class="department-page">
		<scroll-view scroll-y class="department-primary">
			<view @click="tabChangeClick(index)" :class="{ active: tabIndex === index }" class="department-item" v-for="(item, index) in consultStore.departmentList" :key="item.id">
				{{ item.name }}
			</view>
			<view class="department-item"></view>
		</scroll-view>
		<scroll-view class="department-secondary">
			<navigator
				v-for="(item, index) in childDepartmentList"
				:key="item.id"
				hover-class="none"
				:url="`/subpkg_consult/description/description?type=${type}&illnessType=${illnessType}&depId=${item.id}`"
				class="department-item"
			>
				{{ item.name }}
			</navigator>
		</scroll-view>
	</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import useConsultStore from '@/store/consult.js';

const consultStore = useConsultStore();
// 发送请求
consultStore.departmentListAction();

const props = defineProps({
	type: String,
	illnessType: String
});

const tabIndex = ref(0);

// tab切换
const tabChangeClick = (i) => {
	tabIndex.value = i;
};

// 二级科室
const childDepartmentList = computed(() => {
	return consultStore.departmentList[tabIndex.value]?.child;
});
console.log(childDepartmentList);
</script>
<style lang="scss">
// subpkg_consult/department/index.vue
.department-page {
	display: flex;
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 45px);
	/* #endif */
	border-top: 1rpx solid #eee;
}

.department-primary {
	width: 220rpx;
	padding: 20rpx 0;
	background-color: #f6f6f6;

	.department-item {
		line-height: 1.5;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		color: #6f6f6f;

		&.active {
			color: #16c2a3;
			background-color: #fff;
		}
	}
}

.department-secondary {
	flex: 1;
	padding: 20rpx 0;

	.department-item {
		line-height: 1.5;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		color: #3c3e42;
	}
}
</style>
